<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雇员信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            width: 98%;
        }

        /*.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
            text-align: center;
            border-bottom: 1px solid #EBEEF5;
        }*/
        /*.el-table ::-webkit-scrollbar {*/
        /*    display: none;*/
        /*}*/
        .el-table ::-webkit-scrollbar {
            width: 0.5px;
            height: 8px;
        }

        .el-table ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 6px;
            background-color: #b1b1b1;
        }

        .el-table ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            background: #ffffff;
            border-radius: 6px;
        }

        .el-row {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .block {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            font-weight: 400;
            line-height: 1.5;
        }

        .is-bordered-label {
            width: 80px;
        }

        .is-bordered tbody:not(:last-child) tr th {
            width: 50px;
        }

        /*.is-bordered tbody tr th,is-bordered tbody tr th td{*/
        /*    text-align: center;*/
        /*}*/
        .el-dialog__body .el-input {
            width: 60%;
            position: relative;
            font-size: 14px;
        }

        .http-message {
            z-index: 9000 !important;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-left: 20px">
        <el-form ref="searchForm" :model="employeetable" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="性别" prop="">
                        <el-radio v-model="employeetable.sex" label="">不选</el-radio>
                        <el-radio v-model="employeetable.sex" label="M">男</el-radio>
                        <el-radio v-model="employeetable.sex" label="F">女</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="员工姓名" prop="">
                        <el-input v-model="employeetable.employeename" style="width: 200px;"
                                  placeholder="员工姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="聘用日期" prop="">
                        <el-date-picker
                                v-model="employeetable.employedtime"
                                type="date"
                                style="width: 200px;"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="类别" prop="">
                        <el-select v-model="employeetable.departmenttableId" clearable style="width: 200px;"
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in departmenttables"
                                    :key="item.id"
                                    :label="item.departmentType"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="职务" prop="">
                        <el-select v-model="employeetable.duty" clearable style="width: 200px;" placeholder="请选择">
                            <el-option
                                    v-for="item in employeetableDuty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="" prop="">
                        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <el-empty description="没有数据" v-if="employeetables.length == 0"></el-empty>
    <el-table
            :data="employeetables"
            style="width: 100%;" height="500" v-else>
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                prop="employeenumber"
                label="雇员编号"
                width="130" align="center">
        </el-table-column>
        <el-table-column
                prop="departmenttype"
                label="部门"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="employeename"
                label="姓名"
                width="150" align="center">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="50" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.sex=='M'">男</span>
                <span v-else>女</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="telephone"
                label="电话"
                width="150" align="center">
        </el-table-column>
        <el-table-column
                prop="address"
                label="家庭地址"
                :show-overflow-tooltip="true"
                width="170" align="center">
        </el-table-column>
        <el-table-column
                prop="salary"
                label="薪水" align="center">
        </el-table-column>
        <el-table-column
                label="详细信息" align="center">
            <template slot-scope="scope">
                <el-button type="text" style="color: #409EFF" @click="detail(scope.row)">详情信息</el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="删除" align="center">
            <template slot-scope="scope">
                <el-button type="text" style="color: #F56C6C" @click="delEmp(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="更改" align="center">
            <template slot-scope="scope">
                <el-button type="text" style="color: #67C23A" @click="updateEmp(scope.row)">更改</el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="添加账户" align="center">
            <template slot-scope="scope">
                <el-button type="text" @click="addLoginUser(scope.row)">
                    <img class="addUsername" src="../../static/img/添加用户.png" alt="添加用户" width="25px"
                         height="25px">
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currPage"
                :page-sizes="[10, 15, 20, 100]"
                :page-size="pageSize"
                layout="sizes, total, prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
    <el-dialog title="雇员信息" :visible.sync="dialogFormVisible" width="80%">
        <el-descriptions border :colon="true">
            <el-descriptions-item label="编号">{{descriptionsData.employeenumber}}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{descriptionsData.employeename}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{descriptionsData.sex == 'M' ? '男' : '女'}}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{descriptionsData.birthday}}</el-descriptions-item>
            <el-descriptions-item label="家庭地址">{{descriptionsData.address}}</el-descriptions-item>
            <el-descriptions-item label="电话">{{descriptionsData.telephone}}</el-descriptions-item>
            <el-descriptions-item label="职务">{{descriptionsData.duty}}</el-descriptions-item>
            <el-descriptions-item label="职称">{{descriptionsData.posttitle}}</el-descriptions-item>
            <el-descriptions-item label="薪水">{{descriptionsData.salary}}</el-descriptions-item>
            <el-descriptions-item label="部门">{{descriptionsData.departmenttype}}</el-descriptions-item>
            <el-descriptions-item label="雇佣者">{{descriptionsData.employer}}</el-descriptions-item>
            <el-descriptions-item label="被雇用时间">{{descriptionsData.employedtime}}</el-descriptions-item>
            <el-descriptions-item label="修改雇员信息的人">{{descriptionsData.empinfomodifier}}</el-descriptions-item>
            <el-descriptions-item label="修改时间">{{descriptionsData.modifytime}}</el-descriptions-item>
            <el-descriptions-item label="备注">
                <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        :content="descriptionsData.remark">
                    <!--                    <el-button slot="reference">hover 激活</el-button>-->
                    <span slot="reference">{{descriptionsData.remark | ellipsis}}</span>
                </el-popover>

            </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
    <el-dialog
            title="更改雇员信息"
            :visible.sync="dialogVisibleUpadte"
            width="80%"
            :before-close="Cancel">
        <el-form :model="employeetableUpdate" :rules="updateVerify" ref="updateForm" label-position="right"
                 label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="雇员编号">
                        <el-input v-model="employeetableUpdate.employeenumber" autocomplete="off"
                                  placeholder="请输入雇员编号" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="雇员名称" prop="employeename">
                        <el-input v-model="employeetableUpdate.employeename" autocomplete="off"
                                  placeholder="请输入雇员名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="部门">
                        <el-select v-model="employeetableUpdate.departmenttableId" clearable style="width: 395px;"
                                   placeholder="请选择部门">
                            <el-option
                                    v-for="item in departmenttables"
                                    :key="item.id"
                                    :label="item.departmentType"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="telephone">
                        <el-input v-model="employeetableUpdate.telephone" autocomplete="off"
                                  placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-radio v-model="employeetableUpdate.sex" label="M">男</el-radio>
                        <el-radio v-model="employeetableUpdate.sex" label="F">女</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="职务">
                        <el-select v-model="employeetableUpdate.duty" clearable style="width: 395px;"
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in employeetableDuty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="生日">
                        <el-date-picker
                                v-model="employeetableUpdate.birthday"
                                type="date"
                                style="width: 200px;"
                                placeholder="选择日期"
                                :picker-options="pickerOptions"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭住址" prop="address">
                        <el-input v-model="employeetableUpdate.address" autocomplete="off"
                                  placeholder="请输入家庭住址"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="职称" prop="posttitle">
                        <el-input v-model="employeetableUpdate.posttitle" autocomplete="off"
                                  placeholder="请输入职称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="薪水" prop="salary">
                        <el-input v-model.number="employeetableUpdate.salary" autocomplete="off"
                                  placeholder="请输入薪水"></el-input>
                        ￥/月
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input
                                type="textarea"
                                autosize
                                maxlength="150"
                                show-word-limit
                                placeholder="请输入备注"
                                v-model="employeetableUpdate.remark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="Cancel">取 消</el-button>
            <el-button type="primary" @click="commitData">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="添加账户" :visible.sync="dialogFormVisibleAddUpdate" :before-close="addUserCancel">
        <el-form :model="addUser" :rules="addUserVerify" ref="addUser" label-width="80px" label-position="right">
            <el-form-item label="登录名" prop="loginName">
                <el-input v-model="addUser.loginName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="addUser.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass" required>
                <el-input type="password" v-model="addUser.checkPass" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addUserCancel">取 消</el-button>
            <el-button type="primary" @click="addLoginUserCommit">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>

    let vm = new Vue({
        el: '#app',
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.addUser.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                currPage: 1,//当前页
                pageSize: 10,//每页显示条数
                total: 0,//总条数
                dialogFormVisible: false,//对话框显示
                dialogVisibleUpadte: false,//修改框
                employeetables: [],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7;
                    }
                },
                employeetable: {
                    "sex": "",
                    "employeename": "",
                    "employedtime": "",
                    "departmenttableId": "",
                    "duty": ""
                },
                employeetableUpdate: {
                    employeenumber: '',//雇员编号
                    employeename: '',//雇员姓名
                    sex: '',//性别
                    birthday: '',//出生日期
                    address: '',//家庭地址
                    telephone: '',//电话
                    duty: '',//职务
                    posttitle: '',//职称
                    salary: 0,//薪水
                    departmenttableId: '',//部门
                    employer: '',//雇佣者
                    employedtime: '',//被雇用时间
                    empinfomodifier: '',//修改雇员信息的人
                    modifytime: '',//修改时间
                    remark: '',//备注
                },
                updateVerify: {
                    employeename: [
                        {required: true, message: '请输入员工姓名', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    telephone: [
                        {required: true, message: '请输入电话', trigger: 'blur'},
                        {min: 11, max: 13, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入家庭地址', trigger: 'blur'},
                    ],
                    posttitle: [
                        {required: true, message: '请输入职称', trigger: 'blur'},
                    ],
                    salary: [
                        {required: true, message: '请输入工资', trigger: 'blur'},
                        {type: 'number', message: '请输入数字', trigger: 'blur'},
                    ]
                },
                employeetableDuty: [
                    {value: "经理管理员", label: "经理管理员"},
                    {value: "系统管理员", label: "系统管理员"},
                    {value: "仓库管理员", label: "仓库管理员"},
                    {value: "销售管理员", label: "销售管理员"},
                    {value: "用户管理员", label: "用户管理员"},
                ],
                departmenttables: [],
                descriptionsData: [],
                addUser: {
                    loginName: "",
                    password: "admin",
                    checkPass: 'admin',
                    employeetableId: "",
                },
                addUserVerify: {
                    loginName: [{required: true, message: '请输入账号', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    checkPass: [{validator: validatePass2, trigger: 'blur'}],
                },
                dialogFormVisibleAddUpdate: false
            }
        }
        ,
        methods: {
            addLoginUserCommit() {
                let _this = this;
                this.$refs['addUser'].validate((valid) => {
                    if (valid) {
                        addOrUpdateAjax("post", "/logintable/save", this.addUser, function (data) {
                            if (data.code == 200) {
                                _this.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                _this.dialogFormVisibleAddUpdate = false
                            } else {
                                _this.$message.error(data.msg);
                            }
                        })
                    }
                })
            }
            ,
            addLoginUser(rowData) {
                let _this = this;
                selectAjax("get", "/logintable/getLoginUserByEmpId/" + rowData.id, {}, function (data) {
                    if (data.code == 200) {
                        if (data.data == 500) {
                            _this.$confirm('您可以为该雇员创建账号!', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning',
                                center: true
                            }).then(() => {
                                _this.addUser.loginName = rowData.employeename;
                                _this.dialogFormVisibleAddUpdate = true
                                _this.addUser.employeetableId = rowData.id;
                                // const h = _this.$createElement;
                                _this.$notify({
                                    title: '警告',
                                    type: 'warning',
                                    customClass: 'http-message',
                                    dangerouslyUseHTMLString: true,
                                    // message: h('i', { style: 'color: red'}, '默认为雇员名,带*的表示必输,默认密码为admin')
                                    message: '<span>默认账号为雇员名</span><br/><span>默认密码为admin</span><br/><span style="color: red">带*的表示必输</span>'
                                });
                            }).catch(() => {
                                _this.dialogFormVisibleAddUpdate = false
                            });
                        } else {
                            _this.$alert('该用户已经有账号了!', '提示', {
                                confirmButtonText: '确定',
                                center: true,
                                type: 'warning'
                            });
                        }
                    }
                })
            }
            ,
            commitData() {
                let _this = this;
                this.employeetableUpdate.empinfomodifier = localStorage.getItem("username");
                this.employeetableUpdate.modifytime = new Date();
                this.$refs["updateForm"].validate((valid) => {
                    if (valid) {
                        addOrUpdateAjax("put", "/employeetable/update", this.employeetableUpdate, function (data) {
                            _this.dialogVisibleUpadte = false;
                            if (data.code == 200) {
                                _this.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                _this.myEmpInit();
                            } else {
                                _this.$message.error(data.msg);
                            }
                        })
                    }
                })
            }
            ,
            Cancel() {
                this.dialogVisibleUpadte = false;
                this.$refs['updateForm'].resetFields();
            }
            ,
            addUserCancel() {
                this.dialogFormVisibleAddUpdate = false;
                this.$refs['addUser'].resetFields();
            }
            ,
            updateEmp(rowData) {
                this.dialogVisibleUpadte = true;
                let _this = this;
                selectAjax("get", "/employeetable/getByEmployeeNumber/" + rowData.employeenumber, {}, function (data) {
                    _this.employeetableUpdate = data.data
                })
            }
            ,
            delEmp(rowData) {
                let _this = this;
                this.$confirm('此操作将永久删除' + rowData.employeename + '雇员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAJAX("delete", "/employeetable/delete/" + rowData.id, {}, function (data) {
                        if (data.code == 200) {
                            _this.$message({
                                type: 'success',
                                message: data.msg
                            });
                            _this.myEmpInit();
                        } else {
                            _thisthis.$message.error(data.msg);
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
            ,
            detail(rowData) {
                this.dialogFormVisible = true;
                let _this = this;
                selectAjax("get", "/employeetable/getByEmployeeNumber/" + rowData.employeenumber, {}, function (data) {
                    _this.descriptionsData = data.data
                })
            }
            ,
            handleSizeChange(val) {
                this.pageSize = val;
                this.myEmpInit();
            }
            ,
            handleCurrentChange(val) {
                this.currPage = val;
                this.myEmpInit();
            }
            ,
            search() {
                this.myEmpInit();
            }
            ,
            myEmpInit() {//初始化数据
                let _this = this;
                if (localStorage.getItem("token") != null) {
                    $.ajax({
                        url: 'http://localhost:8080/carSales/employeetable/listPage?currPage=' + _this.currPage + '&pageSize=' + _this.pageSize,
                        type: 'get',
                        async: true,
                        beforeSend: function (request) {
                            request.setRequestHeader("Authentication", localStorage.getItem("token"));
                        },
                        // contentType: 'application/json;charset=utf-8',
                        data: _this.employeetable,
                        dataType: 'json',
                        success: function (data) {
                            _this.currPage = data.pageNum;
                            _this.pageSize = data.pageSize;
                            _this.total = data.total;
                            _this.employeetables = data.data
                        }
                    })
                }else {
                    alert("未登录！！！")
                    top.location.href = "../login/login.html";
                }
            }
            ,
            myDepartmenttableInit() {//初始化类别
                let _this = this;
                selectAjax("get", "/departmenttable/getAll", {}, function (data) {
                    _this.departmenttables = data.data;
                })
            }
        }
        ,
        mounted() {
            this.myEmpInit();
            this.myDepartmenttableInit();
        }
        ,
        filters: {
            //文字数超出时，超出部分使用...
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 10) {
                    return value.slice(0, 10) + '...'
                }
                return value
            }
        }
    })
</script>
</body>
</html>